<template>
  <!-- 个人资料页面 -->
  <div>
    <div class="basic-information">
      <el-divider content-position="left">个人资料</el-divider>
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane label="基本资料" name="first">
          <BasicInformation></BasicInformation>
        </el-tab-pane>
        <el-tab-pane label="头像照片" name="second" class="phone">
          <img v-for="item in head" :src="item.url" alt="" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import BasicInformation from '@/components/BasicInformation'
export default {
  data() {
    return {
      activeName: 'first',
      head: [
        {
          id: 1,
          url: 'https://img0.baidu.com/it/u=2671991246,4218187373&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1669914000&t=1158583be6b3e97b72e4ae007caf881c',
        },
        {
          id: 2,
          url: 'http://pic.imeitou.com/uploads/allimg/220530/5-220530164252.jpg',
        },
        {
          id: 3,
          url: 'http://img.touxiangkong.com/uploads/allimg/20220310/1646917866276565.jpg',
        },
        {
          id: 4,
          url: 'http://pic.imeitou.com/uploads/allimg/220530/5-220530164231.jpg',
        },
        {
          id: 5,
          url: 'http://pic.imeitou.com/uploads/allimg/220530/5-220530164246.jpg',
        },
      ],
    }
  },
  components: {
    BasicInformation,
  },
}
</script>

<style lang="scss" scoped>
.basic-information {
  margin: 50px;
  .phone {
    display: flex;
    img {
      margin: 10px 5px;
      width: 100px;
      height: 100px;
      border-radius: 3px;
    }
  }
}
</style>
